<template>
  <div class="activity-management">
    <h1>活动管理</h1>
    
    <!-- 添加/编辑活动表单 -->
    <div class="form-container">
      <h2>{{ isEditing ? '编辑活动' : '添加新活动' }}</h2>
      <form @submit.prevent="saveActivity">
        <input v-model="currentActivity.title" placeholder="标题" required />
        <textarea v-model="currentActivity.description" placeholder="描述" required></textarea>
        <input v-model="currentActivity.date" type="date" required />
        <input v-model="currentActivity.location" placeholder="地点" required />
        
        <div class="form-actions">
          <button type="submit">{{ isEditing ? '更新' : '添加' }}</button>
          <button @click="resetForm" type="button">取消</button>
        </div>
      </form>
    </div>
    
    <!-- 活动列表 -->
    <div class="activity-list">
      <table>
        <thead>
          <tr>
            <th>标题</th>
            <th>日期</th>
            <th>地点</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="activity in activities" :key="activity.id">
            <td>{{ activity.title }}</td>
            <td>{{ activity.date }}</td>
            <td>{{ activity.location }}</td>
            <td>
              <button @click="editActivity(activity)">编辑</button>
              <button @click="deleteActivity(activity.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import activitiesData from '@/data/activities';

export default {
  data() {
    return {
      activities: JSON.parse(localStorage.getItem('activities')) || [...activitiesData],
      currentActivity: {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      },
      isEditing: false
    };
  },
  methods: {
    saveActivity() {
      if (!this.currentActivity.title || !this.currentActivity.date || !this.currentActivity.location) {
        alert('请填写所有必填字段');
        return;
      }

      if (this.isEditing) {
        // 更新现有活动
        const index = this.activities.findIndex(a => a.id === this.currentActivity.id);
        this.activities.splice(index, 1, { ...this.currentActivity });
      } else {
        // 添加新活动
        const newId = Math.max(...this.activities.map(a => a.id)) + 1;
        this.activities.push({ ...this.currentActivity, id: newId });
      }

      // 同步到 localStorage
      localStorage.setItem('activities', JSON.stringify(this.activities));

      this.resetForm();
    },
    editActivity(activity) {
      this.currentActivity = { ...activity };
      this.isEditing = true;
    },
    deleteActivity(id) {
      if (confirm('确定要删除这个活动吗？')) {
        this.activities = this.activities.filter(a => a.id !== id);

        // 同步到 localStorage
        localStorage.setItem('activities', JSON.stringify(this.activities));
      }
    },
    resetForm() {
      this.currentActivity = {
        id: null,
        title: '',
        description: '',
        date: '',
        location: ''
      };
      this.isEditing = false;
    }
  }
};
</script>

<style scoped>
.activity-management {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.form-container {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 30px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

input, textarea {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

button[type="button"] {
  background-color: #ccc;
}

.activity-list {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

th, td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #f5f5f5;
}

tr:hover {
  background-color: #f9f9f9;
}
</style>